<template>
  <div>
            <!--Begin 进口 生鲜 Begin-->
        <div class="i_t mar_10">
            <span class="floor_num">{{index}}F</span>
            <span class="fl">{{ category.name }}</span>                
            <span class="i_mores fr">
                <router-link :to="{name:'GoodsList',params:{'categoryId':item.id}}" v-for="item in categoryItem.childCategories" :key="item.id">{{ item.name }}&nbsp; </router-link>
            </span>
        </div>
        <div class="content">
            <div class="fresh_left">
                <div class="fre_ban">
                    <div id="imgPlay1">
                        <ul class="imgs" id="actor1">
                            <li><a href="#"><img src="../../../assets/images/fre_r.jpg" width="211" height="286" /></a></li>
                            <li><a href="#"><img src="../../../assets/images/fre_r.jpg" width="211" height="286" /></a></li>
                            <li><a href="#"><img src="../../../assets/images/fre_r.jpg" width="211" height="286" /></a></li>
                        </ul>
                        <div class="prevf">上一张</div>
                        <div class="nextf">下一张</div> 
                    </div>   
                </div>
                <div class="fresh_txt">
                    <div class="fresh_txt_c">
                        <router-link :to="{name:'GoodsList',params:{'categoryId':item.id}}" v-for="item in categoryItem.childCategories" :key="item.id">{{ item.name }}</router-link>
                    </div>
                </div>
            </div>
            <div class="fresh_mid">
                <ul>
                    <li v-for="item in  products" :key="item.id">
                        <div class="name"><a href="#">{{ item.name }}</a></div>
                        <div class="price">
                            <font>￥<span>{{ item.price }}</span></font> &nbsp; 26R
                        </div>
                        <div class="img"><router-link :to="{name:'GoodsDetail',params:{id:item.id}}"><img :src="'http://192.168.79.98:9001/'+item.fileName" width="185" height="155" /></router-link></div>
                    </li>
                </ul>
            </div>
            <div class="fresh_right">
                <ul>
                    <li><a href="#"><img src="../../../assets/images/fre_b1.jpg" width="260" height="220" /></a></li>
                    <li><a href="#"><img src="../../../assets/images/fre_b2.jpg" width="260" height="220" /></a></li>
                </ul>
            </div>
        </div>    
        <!--End 进口 生鲜 End-->
  </div>
</template>

<script>
export default {
    name:'CatagoryItem',
    props:['category',"index"],
    mounted(){
        console.log("category",this.category);
        this.getChild(this.category.id);
        this.getProductByCategoryLevel1Id(this.category.id);
    },
    data:function(){
        return{
            categoryItem:[],
            products:[],
        }
    },
    methods:{
        //将传过来的category的子级分类查询出来
        getChild(id){
            this.$axios({
                url:'/easybuy/category/getById',
                params:{
                    id
                }
            }).then(rs=>{
                console.log("childCategories",rs.data);
                this.categoryItem  = rs.data.category;
            })
        },
        //通过category的id从商品表里面查数据
        getProductByCategoryLevel1Id(categoryId){
            this.$axios({
                url:"/easybuy/products/index",
                params:{
                    categoryId,
                }
            }).then(rs=>{
                console.log("products",rs);
                this.products = rs.data.pageInfo.list;
            })
        }
        
    },
}
</script>

<style>

</style>